import React, { FC, useEffect, useState, useRef, useMemo } from 'react'
import { Typography, Spin, Empty } from 'antd'
import { useTitle, useDebounceFn, useRequest } from 'ahooks'
import { useSearchParams } from 'react-router-dom'
import { getQuestionListService } from '../../services/question'
// import QuestionCard from '../../components/QuestionCard'
import ListSearch from '../../components/ListSearch'
import { LIST_PAGE_SIZE, LIST_SEARCH_PARAM_KEY } from '../../constant'
import styles from './index.module.scss'
import QuestionCard from '../../components/QuestionCard'
import useLoadQuestionList from '../../hooks/useLoadQuestionList'
import ListPage from '../../components/ListPage'
const { Title } = Typography

const List: FC = () => {
  useTitle('小慕问卷 - 我的问卷')

  const [started, setStarted] = useState(false) // 是否已经开始加载（防抖，有延迟时间）
  const [page, setPage] = useState(1) // List 内部的数据，不在 url 参数中体现
  // const [list, setList] = useState([]) // 全部的列表数据，上划加载更多，累计
  // const [total, setTotal] = useState(0)
  // const haveMoreData =total > list.length // 有没有更多的、为加载完成的数据

  const [searchParams] = useSearchParams() // url 参数，虽然没有 page pageSize ，但有 keyword
  const keyword = searchParams.get(LIST_SEARCH_PARAM_KEY) || ''
  const { loading, data } = useLoadQuestionList()
  // const { loading, data = {} } = useRequest(getQuestionListService) // 初始加载

  // console.log('data', data)

  const { list, total } = data
  // keyword 变化时，重置信息
  useEffect(() => {
    // setStarted(false)
    // setPage(1)
    // setList([])
    // setTotal(0)
    // fetchData()
  }, [keyword])

  return (
    <div style={{ height: '100%' }}>
      <div className={styles.manageHeader}>
        <div className={styles.left}>
          <Title level={3}>我的问卷</Title>
        </div>
        <div className={styles.questionRight}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.questionContent}>
        {/* 问卷列表 */}
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {(list || []).map((q: any) => (
          <QuestionCard key={q._id} {...q} />
        ))}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
        {/* <div ref={containerRef}>{LoadMoreContentElem}</div> */}
      </div>
    </div>
  )
}

export default List
